<template>
	<view class="comp-scroll-tab">
		<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="0" :enable-flex="true">
			<view v-for="(item, index) in showList" :key="index" class="scroll-view-item_H"
				:class="{active:currentRef===index}" @tap="onTapItem(item, index)">
				<slot name="item" :item="item">
					<view class="item-img-wrap">
						<!-- <view class="item-img"> -->
						<image class="item-img"
							:src="`/static/category/${currentRef===index ? item.imageNameActive : item.imageName}`">
						</image>
					</view>
					<view class="item-name">{{item.name}}</view>
				</slot>

			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import customSvg from '@/components/custom-svg/index.vue';
	import {
		ref,
		defineProps,
		defineEmits,
		computed,
	} from "vue";

	const props = defineProps({
		current: {
			type: Number,
			default: 0
		},
		list: {
			type: Array,
			default: () => ([]),
		}
	});

	const emit = defineEmits(['change'])

	const currentRef = ref(props.current);
	
	const showList = computed(() => {
		return props.list.map((item) => {
			return {
				...item,
				imageName: item.imageUrl.replace('.svg', '') + '.png',
				imageNameActive: item.imageUrl.replace('.svg', '') + '-active.png',
			}
		})
	})

	const onTapItem = (item, index) => {
		currentRef.value = index;
		emit('change', index)
	}

</script>

<style lang="less" scoped>
	.comp-scroll-tab {
		.scroll-view_H {
			white-space: nowrap;
			width: 100%;
		}

		.scroll-view-item_H {
			display: inline-block;
			color: rgba(128, 128, 128, 1);
			font-size: 24rpx;
			letter-spacing: 0;
			text-align: center;
			margin-left: 32rpx;

			&.active {
				// .item-img-wrap {
				// 	color: #fff;
				// 	background: linear-gradient(180deg, rgba(69, 144, 230, 1) 0%, rgba(69, 230, 218, 1) 100%);
				// 	box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.02);

				// }

				// 修改图片的字体颜色
				.item-img {}

				font-weight: bold;
			}

			// .item-img-wrap {
			// 	overflow: hidden;
			// 	border-radius: 100%;
			// 	color: #E5E5E5;
			// 	background: #fff;
			// 	width: 96rpx;
			// 	height: 96rpx;
			// 	background: rgba(255, 255, 255, 1);
			// 	box-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.02);
			// 	display: flex;
			// 	align-items: center;
			// 	justify-content: center;

			// }

			.item-img {
				width: 96rpx;
				height: 96rpx;
			}

			.item-name {
				margin-top: 10rpx;
			}
		}
	}
</style>